<template>
  <div style="margin-top: 0.3125rem;">
    <van-form class="surveyed">
      <van-cell is-link :title="$t('dashbord.workTypeInformation.unit')" :value="unitName" @click="showUnit = true" />
      <van-action-sheet v-model="showUnit" :actions="unitList" @select="onSelectUnit" />
      <van-cell required is-link :title="$t('dashbord.workTypeInformation.team')" :value="teamName" @click="showTeam = true" />
      <van-action-sheet v-model="showTeam" :actions="teamList" @select="onSelect" />
      <van-cell required is-link :title="$t('dashbord.workTypeInformation.workType')" :value="workType" @click="showWorkType = true" />
      <van-action-sheet v-model="showWorkType" :actions="workTypeList" @select="onSelectWorkType" />
      <div v-if="isShowWorkType">
        <van-field required name="uploader" :label="$t('dashbord.workTypeInformation.uploadImg')">
          <template #input>
            <van-uploader v-model="uploader" multiple :max-count="1" :after-read="chooseImg" />
          </template>
        </van-field>
        <van-field
          required
          v-model="form.workTypeNo"
          :name="$t('dashbord.workTypeInformation.workTypeNum')"
          :label="$t('dashbord.workTypeInformation.workTypeNum')"
          :placeholder="$t('dashbord.workTypeInformation.pleaseWorkTypeNum')"
        />
        <van-field
          required
          v-model="form.licencePlace"
          :name="$t('dashbord.workTypeInformation.certificateAddress')"
          :label="$t('dashbord.workTypeInformation.certificateAddress')"
          :placeholder="$t('dashbord.workTypeInformation.pleaseCertificateAddress')"
        />
        <van-cell required :title="$t('dashbord.workTypeInformation.firstLicenseDate')" @click="licenseTime" is-link :value="form.licenceTime" />
        <van-popup v-model="showLicenseTime" position="bottom" style="height: 40%">
          <van-datetime-picker
            v-model="currentDate"
            @confirm="licenseTimeConfirm"
            @cancel="showLicenseTime = false"
            type="date"
            :title="$t('dashbord.workTypeInformation.chooseDate')"
            :min-date="minDate"
            :max-date="maxDate"
          />
        </van-popup>
        <van-cell required :title="$t('dashbord.workTypeInformation.periodValidity')" @click="overdueTime" is-link :value="form.licencePeriod" />
        <van-popup v-model="showOverdueTime" position="bottom" style="height: 40%">
          <van-datetime-picker
            v-model="currentDate"
            @confirm="overdueTimeConfirm"
            @cancel="showOverdueTime = false"
            type="date"
            :title="$t('dashbord.workTypeInformation.chooseDate')"
            :min-date="overdueMinDate"
            :max-date="overdueMaxDate"
          />
        </van-popup>
      </div>
    </van-form>
    <div style="margin-top: 1.25rem;" class="center">
      <!-- <van-button type="info" size="small" round="" @click="prev">上一步</van-button> -->
      <van-button style="width: 80%;"  type="info" round @click="next">{{$t('dashbord.next')}}</van-button>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import dashbordAPI from '../../../../api/dashbordAPI.js'
  export default {
    props: ['builderId'],
    data() {
      return {
        uploader: [],
        isShowWorkType: false,
        form: {
          team: '',
          unitId: '',
          workType: '',
          licencePicUrlList: [],
          workTypeNo: '',
          licencePlace: '',
          licenceTime: '',
          licencePeriod: '',
          projectId: localStorage.getItem('projectId'),
          builderId: this.builderId || this.$route.params.buildId
        },
        unitName: '',
        workType: '',
        teamName: '',
        showOverdueTime: false,
        showLicenseTime: false,
        // showStartTime: false,
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(),
        overdueMinDate: moment(new Date()).add(1,'days')._d,
        overdueMaxDate: new Date(2050, 0, 1),
        currentDate: new Date(),
        workTypeList: [],
        showWorkType: false,
        showTeam: false,
        teamList: [],
        showUnit: false,
        unitList: []
      }
    },
    methods:{
      // 上一步
      prev() {
        this.$emit('prev', {
          prev: 1
        })
      },
      // 查询参建单位
      getUnit() {
        let projectId = localStorage.getItem('projectId')
        dashbordAPI.getUnit(projectId).then(res => {
          this.unitList = res.data.map(item => {
            return {
              name: item.dictLabel,
              value: item.dictCode
            }
          })
        })
      },
      // 班组查询
      getClassGroup() {
        dashbordAPI.getClassGroup().then(res => {
          this.teamList = res.data.map(item => {
            return {
              name: item.dictLabel,
              value: item.dictCode
            }
          })
        })
      },
     // 工种查询
     getWorkType() {
       dashbordAPI.getWorkType().then(res => {
         this.workTypeList = res.data.map(item => {
           return {
             name: item.dictLabel,
             value: item.dictCode,
             isDefault: item.isDefault
           }
         })
       })
     },
      // 选择证件照片
      chooseImg(file){
        dashbordAPI.uploadAvatar(file.file).then(res => {
          this.form.licencePicUrlList.push(res.fileUrl)
        })
      },
      // 选择所属单位
      onSelectUnit(item) {
        this.showUnit = false;
        this.form.unitId = item.value
        this.unitName = item.name
      },
      // 选择班组
      onSelect(item) {
        this.showTeam = false;
        this.form.team = item.value
        this.teamName = item.name
      },
      // 选择工种
      onSelectWorkType(item) {
        if (item.isDefault === 'Y') {
          this.isShowWorkType = true
        } else {
          this.isShowWorkType = false
        }
        this.showWorkType = false;
        this.form.workType = item.value
        this.workType = item.name
      },
      // 选择初次领证时间
      licenseTime() {
        this.showLicenseTime = true
      },
      // 初次领证日期选择确定按钮
      licenseTimeConfirm(val) {
       this.form.licenceTime = moment(val).format('YYYY-MM-DD')
       this.showLicenseTime = false
      },
      // 选择证件有效期
      overdueTime() {
        this.showOverdueTime = true
      },
      // 证件有效期日期选择确定按钮
      overdueTimeConfirm(val) {
       this.form.licencePeriod = moment(val).format('YYYY-MM-DD')
       this.showOverdueTime = false
      },
      // 下一步
      next() {
        var form = JSON.parse(JSON.stringify(this.form));
        if (this.isShowWorkType) {
          if (form.workTypeNo === '') {
            this.$toast.fail('工种证件号不能为空');
            return;
          }
          if (!this.uploader.length) {
            this.$toast.fail('请上传证件照片');
            return;
          }
          if (form.licencePlace === '') {
            this.$toast.fail('请填写发证机关');
            return;
          }
          if (form.licenceTime === '') {
            this.$toast.fail('请选择初次领证时间');
            return;
          }
          if (form.licencePeriod === '') {
            this.$toast.fail('请选择证件有效时间');
            return;
          }
        }
        if (form.enterTime === '') {
          this.$toast.fail('请选择进场时间');
          return;
        }
        if (form.team === '') {
          this.$toast.fail('请选择班组信息');
          return;
        }
        if (form.workType === '') {
          this.$toast.fail('请选择工种信息');
          return;
        }
        // if (form.unitId === '') {
        //   this.$toast.fail('请选择单位信息');
        //   return;
        // }
        dashbordAPI.workTypeSubmit(form).then(res => {
          this.$emit('next', 1)
        })
      },
    },
    mounted() {
      this.getClassGroup()
      this.getWorkType()
      this.getUnit()
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .van-cell__value{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>
